<template>
    <div>
     <div class="login">
        <div class="center-box">
            <div class="login-box">
                <div class="h2">
                    <h2>账号密码登录</h2>
                </div>

                <div class="login-main">
                    <div class="login-input">
                        <input type="text" placeholder="请输入您的账号" v-model="phone" @blur="checkName">
                        <input type="password" placeholder="输入密码" v-model="upwd" @blur="checkUpwd">
                        <span @click="checkFrom">登录</span>
                    </div>
                    <span id="msg"></span>
                    <div class="login-rem">
                        <div class="rem-left">
                            <input type="checkbox">
                            <span>记住密码</span>
                        </div>
                        <div class="rem-right">
                            
                            <router-link to="/register">去注册</router-link>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

    </div>
    
</template>

<script>
    export default {
        data() {
            return {
                phone: '',
                upwd:'',
            }
        },
        methods: {
            checkFrom() {
                if(this.checkName && this.checkUpwd){
                    let params = `phone=${this.phone}&&upwd=${this.upwd}`
                console.log(params)
                const url = 'http://127.0.0.1:3000/cake/user/login'
                this.axios.post(url,params).then(res=>{
                    console.log(res)
                    if(res.data.code == 200){
                        msg.innerHTML = '登录成功'
                        this.$router.push('/')
                    }else{
                        msg.innerHTML = '请重新输入您的账号和密码'
                    }
                })
                }
                
            },
            checkName(){
                if(this.phone == ''){
                    msg.innerHTML = '请填写您的账号'
                }
            },
            checkUpwd(){
                if(this.upwd == ''){
                    msg.innerHTML = '请填写您的密码'
                }
            }
        },
    }
</script>
<style scoped src="../assets/css/login.css">

</style>
<style lang="scss" scoped>

</style>